<template>
  <div>
    <vue-ueditor-wrap
      v-model="context"
      :config="config"
      @input="editorInput"
    ></vue-ueditor-wrap>
  </div>
</template>
<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  name: "Ueditor",
  model: {
    prop: "content",
    event: "getContext",
  },
  props: {
    content: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 400,
    },
  },
  mounted() {},
  watch: {
    content: {
      immediate: true,
      handler(val) {
        this.context = val;
      },
    },
    context(val) {
      console.log(typeof val);
    },
  },
  data() {
    return {
      context: "",
      config: {
        serverUrl: `${HX_GOLD.REQ_URL}/upload-project/upload/editor/editorVerify`,
        UEDITOR_HOME_URL: `${HX_GOLD.EDITOR_URL}/`,
        // 编辑器不自动被内容撑高
        autoHeightEnabled: true,
        // 初始容器高度
        initialFrameHeight: this.height,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 关闭自动保存
        enableAutoSave: false,
        wordCount: false,
        elementPathEnabled: false,
        zIndex: 9,
        // 自定义工具栏，需要额外选项可以参考ueditor.config.js
        toolbars: [
          [
            "bold",
            "italic",
            "underline",
            "|",
            "fontsize",
            "fontfamily",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "simpleupload",
            "kityformula",
          ],
        ],
      },
    };
  },
  components: {
    VueUeditorWrap,
  },
  methods: {
    editorInput() {
      console.log(this.context);
      this.$emit("getContext", this.context);
    },
  },
};
</script>

<style lang="scss">
</style>
